import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'

import User from 'material-ui-icons/AccountBox'
import Home from 'material-ui-icons/Home'
import AppBar from 'material-ui/AppBar';
import { inject, observer } from 'mobx-react'
import { withStyles } from 'material-ui/styles'
import UserStore from '../../stores/user_store'

import createStyle from './style'

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class Header extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  componentDidMount() {

  }
  render() {
    const {
      classes, user, location,
    } = this.props
    const url = `/login/${encodeURIComponent(location.pathname)}`
    const { isLogin } = user
    return (
      <div className={classes.header}>
        <AppBar
          className={classes.appBar}
        >
          { isLogin ?
            <Link to="/user" style={{ color: '#fff' }}>
              <img
                className={classes.userIcon}
                src={user.userInfo.avatarUrl}
                alt={user.userInfo.loginName}
              />
            </Link>
             :
            <Link to={url} style={{ color: '#fff' }}>
              <User className={classes.userIcon} />
            </Link>
          }
          <span className={classes.appBarTitle}>CNode中文社区</span>
          <Link to="/" style={{ color: '#fff' }}>
            <Home className={classes.searchIcon} />
          </Link>
        </AppBar>
      </div>
    )
  }
}
export default withRouter(withStyles(createStyle)(Header))
Header.propTypes = {
  classes: PropTypes.objectOf(Object),
  location: PropTypes.objectOf(Object),
  // match: PropTypes.objectOf(Object),
  user: PropTypes.instanceOf(UserStore),
}
